import React, { Component } from 'react';
import Taro from '@tarojs/taro'
import { View, Image, Text, Button } from '@tarojs/components';
import { Popup } from '@antmjs/vantui';
import './index.scss'


interface FundAuthTipsPopupProps {
    showPopUP: boolean;
    /**
     * 0  1  2  3 
     */
    step: number;
    onClose: Function;
    onSubmit: Function;
}

class FundAuthTipsPopup extends Component<FundAuthTipsPopupProps, any> {

    static defaultProps = {
        showPopUP: true,
        onSubmit: () => { },
        onClose: () => { }
    }

    onClose() {
        this.setState({ showPopUP: false });
        const { onClose } = this.props;
        onClose();
    }

    onSubmit() {
        this.setState({ showPopUP: false });
        const { onSubmit } = this.props;
        onSubmit();
    }

    constructor(props: FundAuthTipsPopupProps) {
        super(props);
        this.state = { showPopUP: false };
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const { showPopUP } = nextProps;
        this.state = { showPopUP: showPopUP };
    }

    render() {
        const { showPopUP } = this.state;
        const { step } = this.props

        return (
            <Popup show={showPopUP} position='bottom' onClose={this.onClose.bind(this)}>
                <View className='auth-tips-popup'>
                    <Text className='tip'>温馨提示</Text>
                    <Text className='desc'>为了更好的维护您的权益，需要请您前往<Text className='blue'>“我的”</Text>页面，完成以下<Text className='blue'>3步</Text>：</Text>
                    <View className={
                        `step ${step >= 1 ? ' step-done' : ''}`
                    }>
                        <View className='step-left '>
                            <Text>①</Text>
                            <Text>开启道以盾</Text>
                        </View>
                        <Image className={`${step < 1 ? 'done-hidden' : ''}`} src={require('@/assets/icons/public/public_setp_done.svg')}></Image>
                    </View>
                    <View className={
                        `step ${step >= 2 ? ' step-done' : ''}`
                    }>
                        <View className='step-left'>
                            <Text>②</Text>
                            <Text>提交实名信息并通过数字证书申请</Text>
                        </View>
                        <Image className={`${step < 2 ? 'done-hidden' : ''}`} src={require('@/assets/icons/public/public_setp_done.svg')}></Image>
                    </View>
                    <View className={
                        `step ${step >= 3 ? ' step-done' : ''}`
                    }>
                        <View className='step-left'>
                            <Text>③</Text>
                            <Text>合格投资者认证通过</Text>
                        </View>
                        <Image className={`${step < 3 ? 'done-hidden' : ''}`} src={require('@/assets/icons/public/public_setp_done.svg')}></Image>
                    </View>
                </View>
            </Popup>);
    }
}

export default FundAuthTipsPopup;